<template>
  <div class="add_exhibit_dialog">
    <el-dialog title="展品信息编辑" :visible.sync="visible" width="50%">
      <el-form :model="form" ref="form">
        <el-form-item label="展品编号：" :label-width="formLabelWidth" prop="number" :rules="[rulesForInput,rulesLength50]">
          <el-input v-model="form.number" auto-complete="off" placeholder="" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="展品名称：" :label-width="formLabelWidth" prop="mainTitle" :rules="[rulesForInput,rulesLength50]">
          <el-input v-model="form.mainTitle" auto-complete="off" placeholder="" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="副标题：" :label-width="formLabelWidth" prop="subheading" :rules="rulesLength100">
          <el-input v-model="form.subheading" auto-complete="off" placeholder="" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="尺寸：" :label-width="formLabelWidth" prop="size" :rules="rulesLength50">
          <el-input v-model="form.size" auto-complete="off" placeholder="" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="标签：" :label-width="formLabelWidth" prop="tag" :rules="rulesLength50">
          <el-input v-model="form.tag" auto-complete="off" placeholder="" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="分类：" :label-width="formLabelWidth" prop="exhibitTypeId" :rules="rulesForSelector"
                      class="exhibit_type_id">
          <app-selector :url="exhibitCategoryUrl" :is-public-api="true" :isrequired="true" :defaultOption="'选择分类'"
                        v-model="form.exhibitTypeId"></app-selector>
        </el-form-item>
        <el-form-item label="简介：" :label-width="formLabelWidth" prop="content" :rules="rulesLength5000">
          <el-input type="textarea" :rows="5" v-model="form.content" auto-complete="off" placeholder=""
                    size="mini"></el-input>
        </el-form-item>
        <el-form-item label="二维码链接地址：" :label-width="formLabelWidth" prop="qrCode" :rules="rulesForUrl" class="exhibit_type_id">
          <el-input v-model="form.qrCode" auto-complete="off" placeholder="" size="mini" ></el-input>
        </el-form-item>
        <el-form-item label="展示方式：" prop="displayMode" :label-width="formLabelWidth">
          <el-radio v-model="form.displayMode" label="0" >图文</el-radio>
          <el-radio v-model="form.displayMode" label="1" >3D</el-radio>
        </el-form-item>
        <el-form-item label="展品主图：" :label-width="formLabelWidth" prop="mainImgUrl">
          <app-single-image-upload v-model="form.mainImgUrl"></app-single-image-upload>
        </el-form-item>
        <el-form-item label="展品相册：" :label-width="formLabelWidth" prop="mainImgUrl">
          <app-multiple-image-upload v-model="form.bExhibitGalleryDtoList"
                                     url-prop="imgUrl"></app-multiple-image-upload>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item label="3D模型文件：" :label-width="formLabelWidth" prop="fileUrlObj">
              <app-models-upload v-model="form.fileUrlObj" :file-name.sync="form.fileUrlObjName" :type="'obj'"></app-models-upload>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="" :label-width="'2em'" prop="fileUrlMtl">
              <app-models-upload v-model="form.fileUrlMtl" :file-name.sync="form.fileUrlMtlName" :type="'mtl'"></app-models-upload>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="" :label-width="'2em'" prop="bExhibitModelImgDtoList">
              <app-models-upload v-model="form.bExhibitModelImgDtoList" :name-prop="'imgName'" :url-prop="'imgUrl'" :type="'jpg,png'"></app-models-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="state" :label-width="formLabelWidth">
          <el-checkbox v-model="form.state">设为入库状态</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  const validateUrl = (rule, value, callback) => {
    if(!value) return;
    let reg = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/;
    let res = reg.test(value);
    if (!res) {
      return callback(new Error('请输入正确的网址格式，例如https://www.baidu.com'));
    } else {
      callback();
    }
  };

  import ApiClient from '@/utils/ApiClient'
  import AppSelector from '@/components/AppSelector'
  import AppSingleImageUpload from '@/components/AppSingleImageUpload'
  import AppMultipleImageUpload from '@/components/AppMultipleImageUpload'
  import AppFileUpload from '@/components/AppFileUpload'
  import AppModlesUpload from './AppModelsUplaod'
  import ValidataRules from '@/utils/validateRules'

  export default {
    name: 'AddExhibitDialog',
    components: {
      'app-selector': AppSelector,
      'app-single-image-upload': AppSingleImageUpload,
      'app-multiple-image-upload': AppMultipleImageUpload,
      'app-file-upload': AppFileUpload,
      'app-models-upload': AppModlesUpload
    },
    props: {
      show: {type: Boolean, default: false},
    },
    data() {
      return {
        formLabelWidth: '135px',
        form: {
          number:'',
          mainTitle: '',
          subheading: '',
          size: '',
          tag: '',
          exhibitTypeId: null,
          content: '',
          mainImgUrl: '',
          bExhibitGalleryDtoList: [],
          bExhibitModelImgDtoList: [],
          fileUrlObj: '',
          fileUrlObjName: '',
          fileUrlMtl: '',
          fileUrlMtlName: '',
          state: false,
          qrCode:'',
          displayMode:'',
        },
        rulesForInput: {required: true, message: '不能为空', trigger: 'blur'},
        rulesForSelector: {required: true, message: '不能为空', trigger: 'change'},
        rulesForUrl: [
          {required: true, message: '不能为空', trigger: 'blur'},
          { validator:ValidataRules.validateUrl(),trigger: 'blur'}
        ],
        rulesLength50: { validator:ValidataRules.limitMaxLength(50),trigger: 'blur' },
        rulesLength100: { validator:ValidataRules.limitMaxLength(100),trigger: 'blur' },
        rulesLength5000: { validator:ValidataRules.limitMaxLength(5000),trigger: 'blur' },
        exhibitCategoryUrl: '/backend/common/typeList.do',
      }
    },
    methods: {
      close() {
        this.$emit('update:show', false)
      },
      //操作
      confirm(form) {
        console.log(this.form);
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.form.state = this.form.state ? 0 : 1;
            ApiClient.post('/backend/exhibit/add.do', this.form).then(data => {
              this.close()
              this.$emit('success')
            }).catch()
          } else {
            return false;
          }
        });
      }
    },
    computed: {
      visible: {
        get: function () {
          return this.show == false ? false : true
        },
        set: function () {
          this.$emit('update:show', false)
        }
      }
    },
    mounted() {
    }
  }
</script>
<style>
  .add_exhibit_dialog .el-dialog__header {
    text-align: center;
  }

  .add_exhibit_dialog .el-dialog__body {
    padding-top: 10px;
  }

  .add_exhibit_dialog .el-form-item__content {
    text-align: left;
  }
</style>
<style scoped>
  .el-form-item {
    margin-bottom: 10px;
  }

  .exhibit_type_id {
    margin-bottom: 15px;
  }


</style>
